<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="./xiu.js"></script>
    <title>Document</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            background-color: black;
        }
    </style>
</head>

<body>
    <input type="text" onchange="gogogo(event)">
    <input type="button" value="开始摇滚" onchange="startActivity(event)">
    <script>
        var cuteColorList = ['#b0dfe5', '#52c7a6', '#fa9e9e', '#c3e5ef', '#ffffff']
        var xiu = new Xiu({
            keepFreq: 100
        });
        var inDateTime = new Date().getTime() / 1000;
        var currentTime = 0;
        window.onload = function () {
            var h1 = this.document.createElement('h1');
            window.document.body.appendChild(h1);
            h1.style.color = 'white'
            setInterval(() => {
                var time = new Date();
                h1.innerText = time.toLocaleString();
                currentTime = (time.getTime()/1000) - inDateTime;
            }, 50)
            // var msg = '123421341234';
            // xiu.addXiu(msg, 3);
            // xiu.playXius();
            // window.onclick = function () {
            //     xiu.addXiu(msg, 5);
            //     xiu.playXius(4);
            // }
        }
        function gogogo(e) {
            console.log(currentTime)
            xiu.addXiu(e.target.value, currentTime, {
                color: cuteColorList[Math.random()*4|0],// "#" + (Math.random() * 999999 | 0),
                top: (Math.random() * screen.height * .7) + 'px',
                speed: .3 + Math.random() * 9.7,
                fontSize: (10 + (Math.random() * 90|0)) + 'px'
            })
            xiu.playXius(currentTime);
            e.target.value = '';
        }
        function startActivity() {
            inDateTime = new Date().getTime() / 1000;
            currentTime = 0;
            xiu.playXius(0);
        }
	
    </script>
</body>

</html>